<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import useStore from '../../modules/store/proOrder'
let store = useStore()
const formRef = ref<FormInstance>()
const numberValidateForm = reactive({
  key: '',
  name: '',
  time: ''
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
      store.searchA(numberValidateForm)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  numberValidateForm.key = '';
  numberValidateForm.name = '';
  numberValidateForm.time = '';
  store.searchA(numberValidateForm)
}

</script>

<template>
  <el-form
      style="display: flex"
      ref="formRef"
      :model="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
  >
    <el-form-item
        label="编号"
        prop="key"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
    >
      <el-input
          v-model.trim="numberValidateForm.key"
          type="text"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item
        label="商品名称"
        prop="name"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
    >
      <el-input
          v-model.trim="numberValidateForm.name"
          type="text"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item
        label="创建时间"
        prop="time"
        :rules="[
        { required: false, message: '请填入相关信息' },
        { type: 'Array', message: '需要类型匹配' },
      ]"
    >
      <el-date-picker
          v-model.trim="numberValidateForm.time"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="Pick a date"
          :default-value="new Date(2023, 7, 14)"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="warning" @click="submitForm(formRef)">搜索</el-button>
      <el-button type="warning" plain @click="resetForm(formRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
